<template>
  <div class="sizepdf">
    <el-button
      type="primary"
      size="default"
      v-print="'#printMe'"
      style="margin-top: 20px"
      >下载</el-button
    >
    <div class="sizepdf-a4" v-if="form" id="printMe">
      <div class="sizepdf-a4-title">十三余大货生产规格尺寸表</div>
      <div class="sizepdf-a4-detail">
        <div class="sizepdf-a4-detail-image">
          <el-image :src="form.wear_image[0]" fit="fill" :preview-src-list="form.wear_image"></el-image>
        </div>
        <div class="sizepdf-a4-detail-data">
          <div class="sizepdf-a4-detail-data-one">{{ form.type_no }}</div>
          <div class="sizepdf-a4-detail-data-two">
            <div>品名：{{ form.type_name }}</div>
            <div>版师：{{ form.publisher }}</div>
            <div>尺寸表更新时间：{{ form.log_list[0].createtime }}</div>
          </div>
          <div class="sizepdf-a4-detail-data-three">
            更新人：{{ form.log_list[0].username }}
          </div>
        </div>
      </div>
      <div class="sizepdf-a4-table">
        <el-table
          :data="form.plank_house_table_data"
          v-if="form.plank_house_table_data"
          size="mini"
          border
          style="width: 100%"
          :header-cell-style="changeHeaderCellStyle"
        >
          <el-table-column prop="position_title" label="部位" align="center">
          </el-table-column>
          <el-table-column
            prop="position_method"
            label="测量方法"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="gear_difference" label="*档差" align="center">
          </el-table-column>
          <template v-for="(item, index) in form.plank_house_table_title.code_list">
          <el-table-column
           :key="index"
            v-if="item.is"
            :label="item.size_code.title"
            align="center"
          >
            <el-table-column
              :prop="item.size_code.title"
              :key="index"
              :label="item.height_code.title + '/' + item.waist_code.title"
              align="center"
            >
              <template slot-scope="{ row }">
                {{ row.code_list[item.size_code.title] }}
              </template>
            </el-table-column>
          </el-table-column>
          </template>
          
          <el-table-column
            prop="sample_code"
            :label="form.plank_house_table_title.sample_code"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="tolerance" label="公差±(cm)" align="center">
          </el-table-column>
          <el-table-column prop="remarks" label="备注" align="center">
          </el-table-column>
        </el-table>
      </div>
      <div class="sizepdf-a4-content">
        <div class="sizepdf-a4-content-div">
          <div class="sizepdf-a4-content-div-title">测量图</div>
          <div class="sizepdf-a4-content-div-image">
            <el-image
              :preview-src-list="[item]"
              v-for="item in form.measure_image"
              :key="item"
              :src="item"
              fit="fill"
            ></el-image>
          </div>
        </div>
        <div class="sizepdf-a4-content-div">
          <div class="sizepdf-a4-content-div-title">特别注意</div>
          <div class="sizepdf-a4-content-div-text">
            {{ form.be_careful }}
          </div>
        </div>
        <div class="sizepdf-a4-content-div">
          <div class="sizepdf-a4-content-div-title">温馨提示</div>
          <div class="sizepdf-a4-content-div-text">
            {{ form.reminder }}
          </div>
        </div>
        <div class="sizepdf-a4-content-div">
          <div class="sizepdf-a4-content-div-title">成衣风险</div>
          <div class="sizepdf-a4-content-div-text">
            {{ form.risk }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { postAdminOperateLook_new_products_plank_house } from "@/api";
export default {
  data() {
    return {
      form: "",
      is_base_title: "",
    };
  },
  mounted() {
    this.postAdminOperateLook_new_products_plank_house(
      this.$route.query.type_no
    );
  },
  methods: {
    changeHeaderCellStyle(row, rowIndex) {
      if (row.column.label == this.is_base_title) {
        return { color: "red" };
      }
    },
    async postAdminOperateLook_new_products_plank_house(type_no) {
      let obj = {
        type_no,
      };
      let res = await postAdminOperateLook_new_products_plank_house(obj);
      let data = res.data;
      data.wear_image = data.wear_image || [];
      data.measure_image = data.measure_image || [];
      this.product_base_code = data.products_base_cdoe || "";
      data.plank_house_table_title.code_list.forEach(e=>{
        if(!(e.hasOwnProperty('is'))){
          e.is = true
        }
      })
      if (data.products_base_cdoe) {
        this.is_base_title =
          data.products_base_cdoe.base_code.height_code.title +
          "/" +
          data.products_base_cdoe.base_code.waist_code.title;
      }
      this.form = data;
      console.log(this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
.sizepdf-a4 {
  background: #ffffff;
  width: 287mm;
  font-size: 14px;
  padding: 0 5mm 5mm;
  .sizepdf-a4-title {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    padding: 16px 0;
  }
  .sizepdf-a4-detail {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 10px;
    margin-bottom: 20px;
    .sizepdf-a4-detail-image {
      > .el-image {
        width: 30mm;
      }
    }
    .sizepdf-a4-detail-data {
      margin-left: 5mm;
      .sizepdf-a4-detail-data-one {
        font-weight: 800;
        font-size: 16px;
      }
      .sizepdf-a4-detail-data-two {
        margin: 10px 0;
        width: 247mm;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .sizepdf-a4-table {
    > .el-table {
        border: 2px solid #ebeef5;
    }
  }
  .sizepdf-a4-content {
    margin-top: 20px;
    border: 1px solid #ebeef5;
    > div:not(:nth-child(1)) {
      border-top: 1px solid #ebeef5;
    }
    .sizepdf-a4-content-div {
      display: flex;
      .sizepdf-a4-content-div-title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100mm;
        border-right: 1px solid #ebeef5;
      }
      .sizepdf-a4-content-div-image {
        display: flex;
        flex-wrap: wrap;
        padding: 5mm;
        width: 170mm;
        > .el-image {
          width: 54mm;
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }
      .sizepdf-a4-content-div-text {
        padding: 5mm;
        width: 170mm;
      }
    }
  }
}
</style>